<template>
	<view>
		<!-- <view class="title">
			{{info.shop.name}}
		
		</view> -->
		
		<view class='panel items-list' v-if="show_type == 1">
			<view class="item" @click="goto('/merchant/order-log')">
				<view class=""><uni-icons type="list" size="30"></uni-icons></view>
				<view class="">申请记录</view>
			</view>
			<view class="item" @click="goto('/merchant/apply-add')">
				<view class=""><uni-icons type="folder-add" size="30"></uni-icons></view>
				<view class="">业绩录入</view>
			</view>
		</view>
		
		<view class="panel">
			<view>
				<view class="common-title">业绩统计</view>
				<view class="input-item">
					<view class="label">项目</view>
					<view class="user">
						<input class="input" type="text" placeholder="请选择项目" v-model="projectText" disabled="disabled" @click="showProject">
						<view class="close" @click="clearProject"><uni-icons type="close" size="30" color="#999"></uni-icons> </view>
					</view>
				</view>
				<view class="input-item">
					<view class="label">职工</view>
					<view class="user">
						<input class="input" type="text" placeholder="请输入职工姓名" v-model="member.realname" disabled="disabled" @click="showMember">
						<view class="close" @click="clearMember"><uni-icons type="close" size="30" color="#999"></uni-icons> </view>
					</view>
				</view>
				<view class="input-item">
					<view  class="label">有效期</view>
					<view class="select-date"><uni-datetime-picker v-model="range" type="daterange"
							@maskClick="maskClick" :value="dateValue" /></view>
				</view>
				<view class="btn-search" @click="getTotal">查询</view>
			</view>
			<view class="data">
				<view class="sum">
					<view class="number">{{sum ? sum : 0}}</view>
					<view>累计业绩</view>
				</view>
			</view>
			<view class="detail-title">业绩明细</view>
			<view class="bd" v-if="listData.length>0">
				<block v-for="(item,index) in listData" v-key="id">
					<view class="item">
						<view class="item-l">
							<view class="type-txt"><text class="label">申请类型：</text>{{item.project.name || ''}}</view>
							<view class="type-txt">
								<text class="label" v-if="item.username">用户名：</text>{{item.username || ''}}
							</view>
							<view class="type-txt">
								<text class="label">申请备注：</text>{{item.content || ''}}
							</view>
							<view class="type-txt">
								<text class="label">可获积分：</text>{{item.score || ''}}
							</view>
							<view class="type-txt" v-if="item.remark">
								<text class="label">审核备注：</text>{{item.remark || ''}}
							</view>
							<view class="type-txt">
								<text class="label">审核状态：</text>{{item.state | state2text}}
							</view>
							<view class="time">{{item.created_at | time}}</view>
						</view>
						<view class="item-r" :class="item.price > 0 ? '' : ''">
							<view>{{item.price}}</view>
						</view>
					</view>
				</block>
				
			</view>
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<jhxSelectUser ref="selectMember" @selectMember="selectMember"></jhxSelectUser>
		<jhxSelectProject ref="selectProject" @selectProject="selectProject"></jhxSelectProject>
	</view>
</template>

<script>
	import mHelper from '@/utils/helper';
	import moment from '@/utils/moment';
	import jhxSelectUser from '@/merchant/components/jhx-select-user/jhx-select-user.vue';
	import jhxSelectProject from '@/components/jhx-select-project/jhx-select-project.vue';
	import {
			analyzeTotal
		} from '@/api/merchant/order.js';
	import {
		orderLog
	} from '@/api/merchant/order.js';
	export default {
		components: {jhxSelectUser,jhxSelectProject},
		data() {
			return {
				info: {
					order_num: 0,
					total: 0,
					shop: {
						address: '',
						logo: '',
						name: '',
						score: 0
					}
				},
				withdrawable:'',
				money_ums:0,
				totalUser: 0,
				listData: [],
				page:1,
				page_size:15,
				loadStatus:'more',
				show_type: 1,
				type: 2,
				range:[],
				sum:0,
				member:{},
				parentProject:{},
				project:{},
				projectText:''
			}
		},
		onLoad() {
			// this.shopInfo();
			// this._getUser();
			// this.getMoney();
			this.getTotal();
		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm')
			},
			//转整
			toInt(val) {
				return helper.toInt(val);
			},
			//百分比
			toPercent(val) {
				return helper.toPercent(val);
			},
			state2text(state){
				state = parseInt(state);
				switch (state){
					case 0:
						return "待审核";
						break;
					case 1:
						return "已通过";
						break;
					case 3:
						return "已驳回";
						break;
					default:
						return "未知状态";
						break;
				}
			}
		},
		methods: {
			showProject(){
				this.$refs.selectProject.open();
			},
			selectProject(e){
				this.parentProject = e.parent;
				this.project = e.child;
				this.projectText = this.parentProject.name + "-" + this.project.name;
			},
			clearProject(){
				this.project = {};
			},
			showMember(){
				this.$refs.selectMember.open();
			},
			selectMember(e){
				console.log(e);
				this.member = e;
			},
			clearMember(){
				this.member = {};
			},
			_getData: function() {
				var that = this;
				var args = {
					member_id : this.member.id ? this.member.id : '',
					project_parent_id:this.parentProject.id ? this.parentProject.id : '',
					project_id:this.project.id ? this.project.id : '',
					num:this.page_size,
					'per-page':this.page_size,
					page:this.page,
					state:1
				}
				
				var range = this.range;
				if(range && range.length > 0){
					args.start_time = range[0];
					args.end_time = range[1];
				}
				this.$data.loadStatus = 'loading';
				this.$http.get(`${orderLog}`, args)
					.then(async res => {
					uni.hideLoading();
					if (res.code == 200) {
						if (that.$data.page == 1) {
							that.$data.items = [];
						}
						var resData = res.data.itmes;
						var items = that.$data.listData.concat(resData);
						that.$data.listData = items;
						// that.total_score = res.data.total_score;
						// that.total_price = res.data.total_price;
						//隐藏正在加载中
						that.$data.hiddenLoading = true;
						
						if (resData.length < that.page_size) {
							that.$data.loadStatus = 'noMore'
						} else {
							that.$data.loadStatus = 'more'
						}
					} else {
						uni.showToast({
							title: res.errmsg ? res.errmsg : '获取数据失败！',
							icon: 'none'
						})
					}
			
				});
			},
			getTotal: function() {
				var that = this;
				var args = {
					member_id : this.member.id ? this.member.id : '',
					project_parent_id:this.parentProject.id ? this.parentProject.id : '',
					project_id:this.project.id ? this.project.id : ''
				}
				var range = this.range;
				if(range && range.length > 0){
					args.start_time = range[0];
					args.end_time = range[1];
				}
				uni.showLoading({
					title:'查询中'
				})
				this.$http.get(`${analyzeTotal}`, args)
					.then(async data => {
						uni.hideLoading();
						if (data.code == 200) {
							var data = data.data;
							that.sum = data;
						}
					});
				
				this.page = 1;
				this.listData = [];
				this._getData();
			},
			//商户信息
			shopInfo: function() {
				var that = this;
				var args = {}
				shop.info(args, (res) => {
					if(res.errcode == 401 && uni.getStorageSync('loging')){
						mHelper.backToLogin();
						return;
					}
					if(res.errcode == 400){
						uni.showModal({
							title:"提示",
							content:"您不是该店铺管理员，请切换登录账号",
							success(res) {
								if(res.confirm){
									var param = {}
									param.route = '/pages/shop/index'
									param.query = {}
									uni.setStorageSync('backToPage',JSON.stringify(param));
									uni.navigateTo({
										url:'/pages/public/logintype'
									})
								}
							}
						})
						return;
					}
					this.$data.info = res.item;
					that.h5path = Config.domain+"/pages/home_shop/arrive?shop_id="+this.$data.info.shop.id;
				});
			},
			onReachBottom: function() {
				if (this.$data.loadStatus == 'noMore') {
					return false;
				}
				this.$data.page++;
				this._getData();
			},
			
		},
	}
</script>

<style lang="scss">
	page {
		font-size: 30rpx;
	}
	.panel{
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.common-title{font-weight: bold;margin-bottom: 30rpx;font-size: 36rpx;}
	}
	.shop_name {
		font-weight: bold;
		font-size: 32rpx;
		margin-left: 20rpx;
		padding-top: 10rpx;
	}
	.items-list {
		display: flex;
		.item {
			font-size: 28rpx;
			text-align: center;
			width: 33.33%;
			
			color: #666;
			display: block;
		}
		.iconfont {
			margin-bottom: 15rpx;
			font-size: 40rpx;
		}
		image {
			width: 40rpx;
			margin-bottom: 15rpx;
		}
	}
	.input-item{
		margin-bottom: 20rpx;
		.label{margin-bottom: 10rpx;}
		.input{border: 1px solid #ececec;padding:20rpx 20rpx;height: auto;border-radius: 10rpx;}
		.uni-date__x-input{height: 80rpx;line-height: 80rpx;}
		.user{display: flex;align-items: center;
			input{width: calc(100% - 100rpx);}
		}
		.close{
			width: 100rpx;text-align: center;
		}
	}
	.btn-search{background-color: #1798ff;color: #fff;width: 200rpx;text-align: center;padding: 15rpx 0;border-radius: 10rpx;margin-top: 10rpx;}
	.data{
		display: flex;justify-content: center;margin-top: 30rpx;text-align: center;
		.number{font-weight: bold;font-size: 50rpx;margin-bottom: 10rpx;}
	}
	.bd .item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0rpx;
		background-color: #fff;
		border-bottom: 1px solid #ececec;
	}
	
	.bd .item .item-l .tit {
		font-weight: 500;
		margin-bottom: 20rpx;
		font-size: $uni-font-size-base + 2rpx;
	}
	
	.bd .item .item-l .time {
		font-size: 24rpx;
		color: #999;
	}
	
	.bd .item .item-r {
		padding-left: 30rpx;
		font-size: $uni-font-size-lg;
		font-weight: 600;
		text-align: center;
	}
	.detail-title{font-weight: bold;margin-top: 30rpx;}
	.type-txt{
		display: flex;
		.label{width: 160rpx;color: #999;display: block;}
	}
</style>
